<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      姓名：<input type="text" class="username" /><br />
      qq:<input type="text" class="qq" /><br />
      网址：<input type="text" class="web" /><br />
      身份证:<input type="text" class="ID" /><br />
      手机号：<input type="text" class="phone" /><br />
      邮箱：<input type="text" class="emali" /><br />

      <input type="submit" value="提交" />
      <hr />
      <span class="info">提示信息</span>
    </form>
    <script>
      // 中文名字 ：2-4位；[\u4e00-\u9fa5]  匹配中文字符
      var cNamereg = /^[\u4e00-\u9fa5]{2,4}$/g;
      var usernameEle = document.querySelector(".username");
      usernameEle.onchange = function () {
        //也可以用onblur
        var str = usernameEle.value;
        // console.log(str);
        if (cNamereg.test(str)) {
          document.querySelector(".info").innerHTML = "名字输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = "名字输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };

      // qq号  :开头1-9 中间0-9 总 5-11位
      var QQreg = /^[1-9]\d{4,10}$/; //QQ
      document.querySelector(".qq").onchange = function () {
        var str = this.value;
        if (QQreg.test(str)) {
          document.querySelector(".info").innerHTML = "qq号输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = "qq号输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };
      // 网址 ：http(https)://www.网站名（字符+数字 也可以是纯数字 2位以上）.com(.cn)
      var webreg = /^((http)|(https):\/\/)?www.\w{2,}.((com)|(cn)){1,2}$/;
      document.querySelector(".web").onchange = function () {
        var str = this.value;
        if (webreg.test(str)) {
          document.querySelector(".info").innerHTML = "网址输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = "网址输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };
      // 身份证号: 18位  最后一位可以是X
      var Idreg = /^[1-9]\d{16}([0-9]|x|X)$/;
      document.querySelector(".ID").onchange = function () {
        var str = this.value;
        if (Idreg.test(str)) {
          document.querySelector(".info").innerHTML = " 身份证号输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = " 身份证号输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };
      // 邮箱 ：@emali
      var emalireg = /^[1-9a-zA-Z]\w{1,}@(qq)|(163).com$/;
      document.querySelector(".emali").onchange = function () {
        var str = this.value;
        if (emalireg.test(str)) {
          document.querySelector(".info").innerHTML = " 邮箱输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = " 邮箱输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };
      // 手机号：1开头 中间3456789  总11位

      var phonereg = /^1([2-9]{10})$/; //手机号
      document.querySelector(".phone").onchange = function () {
        var str = this.value;
        if (phonereg.test(str)) {
          document.querySelector(".info").innerHTML = " 手机号输入符合规则";
          document.querySelector(".info").style.color = "green";
        } else {
          document.querySelector(".info").innerHTML = " 手机号输入不符合规则";
          document.querySelector(".info").style.color = "red";
        }
      };
    </script>
  </body>
</html>
